<template>
  <a-card :bordered="false">
    <div class="card-title">{{ $route.meta.title }}</div>
    <a-spin :spinning="isLoading">
      <a-form :form="form" @submit="handleSubmit">
        <a-tabs :activeKey="tabKey" :tabBarStyle="{ marginBottom: '30px' }" @change="handleTabs">
          <a-tab-pane :key="0" tab="基本内容"></a-tab-pane>
          <a-tab-pane :key="1" tab="详情"></a-tab-pane>
          <a-tab-pane :key="2" tab="金币设置"></a-tab-pane>
          <a-tab-pane :key="3" tab="更多设置"></a-tab-pane>
        </a-tabs>
        <div class="tab-pane" v-show="tabKey == 0">
          <a-form-item label="项目标的" :label-col="{ span: labelCol.span }" :wrapper-col="{ span: wrapperCol.span }">
            <a-input
              type="text"
              placeholder="请输入项目标的"
              v-decorator="['title', { rules: [{ required: true, message: '请输入项目标的' }] }]"
            />
          </a-form-item>
          <a-form-item
            label="选择项目类型"
            :label-col="{ span: labelCol.span }"
            :wrapper-col="{ span: wrapperCol.span }"
          >
            <a-select
              placeholder="请选择项目类型"
              v-decorator="['type_project', { rules: [{ required: true, message: '选择项目类型' }] }]"
            >
              <a-select-option value="1">患者项目</a-select-option>
              <a-select-option value="2">健康项目</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item
            label="选择疾病类型"
            :label-col="{ span: labelCol.span }"
            :wrapper-col="{ span: wrapperCol.span }"
          >
            <a-select
              placeholder="选择疾病类型"
              v-decorator="['type_illness', { rules: [{ required: true, message: '选择疾病类型' }] }]"
            >
              <a-select-option v-for="(item, i) in illnessList" :key="i" :value="item.id">{{
                item.tag
              }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="营养补助" :label-col="{ span: labelCol.span }" :wrapper-col="{ span: wrapperCol.span }">
            <a-input
              suffix="元"
              type="number"
              placeholder="请输入营养补助"
              v-decorator="[
                'allowance',
                { rules: [{ required: true, message: '请输入营养补助' }, { validator: this.testMoney }] },
              ]"
            />
          </a-form-item>
          <a-form-item
            label="活动开始时间"
            :label-col="{ span: labelCol.span }"
            :wrapper-col="{ span: wrapperCol.span }"
          >
            <a-date-picker
              show-time
              placeholder="请选择开始时间点"
              v-decorator="['start_time', { rules: [{ required: true, message: '请选择开始时间点' }] }]"
            />
          </a-form-item>
          <a-form-item
            label="活动截止时间"
            :label-col="{ span: labelCol.span }"
            :wrapper-col="{ span: wrapperCol.span }"
          >
            <a-date-picker
              show-time
              placeholder="请选择截止时间点"
              v-decorator="['end_time', { rules: [{ required: true, message: '请选择截止时间点' }] }]"
            />
          </a-form-item>
          <a-form-item label="参与人性别" :label-col="{ span: labelCol.span }" :wrapper-col="{ span: wrapperCol.span }">
            <a-select
              placeholder="请选择参与人性别"
              v-decorator="['sex', { rules: [{ required: true, message: '请选择参与人性别' }] }]"
            >
              <a-select-option v-for="(item, i) in sexAction" :key="i" :value="item.val">{{
                item.name
              }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="年龄范围" :label-col="{ span: labelCol.span }" :wrapper-col="{ span: wrapperCol.span }">
            <a-input-group compact>
              <a-input
                type="number"
                style="width: 100px; text-align: center"
                placeholder="最小年龄"
                v-decorator="[
                  'age_min',
                  { rules: [{ required: true, message: '请输入最小年龄' }, { validator: this.testMinAge }] },
                ]"
              />
              <a-input
                style="width: 30px; border-left: 0; pointer-events: none; backgroundcolor: #fff"
                placeholder="-"
                disabled
              />
              <a-input
                type="number"
                style="width: 100px; text-align: center; border-left: 0"
                placeholder="最大年龄"
                v-decorator="[
                  'age_max',
                  { rules: [{ required: true, message: '请输入最大年龄' }, { validator: this.testMaxAge }] },
                ]"
              />
            </a-input-group>
          </a-form-item>
          <a-form-item label="烟检" :label-col="{ span: labelCol.span }" :wrapper-col="{ span: wrapperCol.span }">
            <a-radio-group
              v-decorator="[
                'is_smoke',
                { initialValue: '0' },
                { rules: [{ required: true, message: '请选择有无烟检' }] },
              ]"
            >
              <a-radio-button value="1"> 有烟检 </a-radio-button>
              <a-radio-button value="0"> 无烟检 </a-radio-button>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="住院天数" :label-col="{ span: labelCol.span }" :wrapper-col="{ span: wrapperCol.span }">
            <a-input
              type="number"
              suffix="天"
              placeholder="请输入住院天数"
              v-decorator="[
                'be_in_day',
                { rules: [{ required: true, message: '请输入住院天数' }, { validator: this.testBedIn }] },
              ]"
            />
          </a-form-item>
          <a-form-item label="当前医院" :label-col="{ span: labelCol.span }" :wrapper-col="{ span: wrapperCol.span }">
            <a-select
              placeholder="请选择当前医院"
              v-decorator="['hospital_id', { rules: [{ required: true, message: '请选择当前医院' }] }]"
            >
              <a-select-option v-for="(item, i) in hospitalList" :key="i" :value="item.id">{{
                item.name
              }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="所属医院" :label-col="{ span: labelCol.span }" :wrapper-col="{ span: wrapperCol.span }">
            <a-select
              mode="multiple"
              style="width: 100%"
              placeholder="请选择所属医院"
              v-decorator="['hospital_id_other', { rules: [{ required: true, message: '请选择所属医院' }] }]"
            >
              <a-select-option v-for="(item, i) in hospitalList" :key="i" :value="item.id">{{
                item.name
              }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <SelectRegion
              placeholder="请选择省市区"
              v-decorator="['address', { rules: [{ required: true, message: '请选择省市区' }] }]"
            />
          </a-form-item>
          <a-form-item label="项目热度" :label-col="{ span: labelCol.span }" :wrapper-col="{ span: wrapperCol.span }">
            <a-radio-group
              v-decorator="[
                'is_heat',
                { initialValue: '0' },
                { rules: [{ required: true, message: '请选择项目热度' }] },
              ]"
            >
              <a-radio-button value="0"> 普通项目 </a-radio-button>
              <a-radio-button value="1"> 热门项目 </a-radio-button>
            </a-radio-group>
          </a-form-item>
        </div>
        <div class="tab-pane" v-show="tabKey == 1">
          <a-button type="primary" block @click="infoAdd()">新增详情段落</a-button>
          <br />
          <br />
          <a-row>
            <a-col :span="12" v-for="(data, k) in infoData" :key="data.id">
              <div style="padding: 10px">
                <a-card size="small">
                  <a slot="extra" href="#" @click="delInfo(k)">删除</a>
                  <a-form-item :label="item.label" v-for="(item, i) in data.data" :key="i">
                    <a-input
                      v-if="item.type == 'input'"
                      :placeholder="`请输入${item.label}`"
                      :auto-size="item.autoSize"
                      v-decorator="[
                        `info[${data.id}][${item.name}]`,
                        { rules: [{ required: true, message: `请输入${item.label}` }] },
                      ]"
                    />
                    <a-textarea
                      v-if="item.type == 'textarea'"
                      :placeholder="`请输入${item.label}`"
                      :auto-size="item.autoSize"
                      v-decorator="[
                        `info[${data.id}][${item.name}]`,
                        { rules: [{ required: true, message: `请输入${item.label}` }] },
                      ]"
                    />
                  </a-form-item>
                </a-card>
              </div>
            </a-col>
          </a-row>
        </div>
        <div class="tab-pane" v-show="tabKey == 2">
          <a-form-item
            label="交通补助（金币）"
            :label-col="{ span: labelCol.span }"
            :wrapper-col="{ span: wrapperCol.span }"
          >
            <a-input
              suffix="枚"
              type="number"
              placeholder="请输入交通补助（金币）"
              v-decorator="[
                'transport_gold',
                { rules: [{ required: true, message: '请输入交通补助（金币）' }, { validator: this.testMoney }] },
              ]"
            />
          </a-form-item>
          <a-form-item
            label="推荐者收益（金币）"
            :label-col="{ span: labelCol.span }"
            :wrapper-col="{ span: wrapperCol.span }"
          >
            <a-input
              suffix="枚"
              type="number"
              placeholder="请输入营养补助（金币）"
              v-decorator="[
                'gold',
                { rules: [{ required: true, message: '请输入营养补助（金币）' }, { validator: this.testMoney }] },
              ]"
            />
          </a-form-item>
          <a-form-item label="出组奖励" :label-col="{ span: labelCol.span }" :wrapper-col="{ span: wrapperCol.span }">
            <a-input
              suffix="元"
              type="number"
              placeholder="请输入出组奖励"
              v-decorator="[
                'out_award',
                { rules: [{ required: true, message: '请输入出组奖励' }, { validator: this.testMoney }] },
              ]"
            />
          </a-form-item>
        </div>
        <div class="tab-pane" v-show="tabKey == 3">
          <a-form-item label="待复制内容" :label-col="{ span: labelCol.span }" :wrapper-col="{ span: wrapperCol.span }">
            <a-textarea
              placeholder="请输入待复制内容"
              :auto-size="{ minRows: 3, maxRows: 5 }"
              v-decorator="['copy', { rules: [{ required: true, message: '请输入待复制内容' }] }]"
            />
          </a-form-item>
        </div>
        <a-form-item :wrapper-col="{ span: wrapperCol.span, offset: labelCol.span }">
          <a-button type="primary" html-type="submit">提交</a-button>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-card>
</template>

<script>
import * as Api from '@/api/project/project'
import { SelectRegion } from '@/components'

export default {
  components: {
    SelectRegion,
  },
  data() {
    return {
      currentTime: new Date().getTime(),
      // 默认的标签索引
      tabKey: 0,
      // 标签布局属性
      labelCol: { span: 3 },
      // 输入框布局属性
      wrapperCol: { span: 7 },
      // loading状态
      isLoading: false,
      // 当前表单元素
      form: this.$form.createForm(this),
      // 当前记录详情
      record: {},
      //
      address: [1, 2, 3],
      // 疾病选择框总显示条数
      illnessLine: 200,
      illnessList: [],
      // 所属医院选择框总显示条数
      hospitalLine: 200,
      hospitalList: [],
      info: [
        {
          type: 'input',
          label: '详情标题',
          name: 'title',
          autoSize: { minRows: 2, maxRows: 8 },
        },
        {
          type: 'textarea',
          label: '简介',
          name: 'intro',
          autoSize: { minRows: 2, maxRows: 8 },
        },
        // {
        //   type: 'textarea',
        //   label: '时间安排说明',
        //   name: 'arrangement',
        //   autoSize: { minRows: 2, maxRows: 8 },
        // },
        // {
        //   type: 'textarea',
        //   label: '实验获益说明',
        //   name: 'earnings_remark',
        //   autoSize: { minRows: 2, maxRows: 8 },
        // },
      ],
      //详情数组
      infoData: [],
      // 参与人性别
      sexAction: [
        { val: '0', name: '不限' },
        { val: '1', name: '男' },
        { val: '2', name: '女' },
      ],
      infoId: 0,
    }
  },
  // 初始化数据
  created() {
    // 疾病类型列表
    this.getIllness()
    // 获取所属医院
    this.getHospital()
    //详情数组添加初始数据
    this.infoAdd()
  },
  methods: {
    // 切换tab选项卡
    handleTabs(key) {
      this.tabKey = key
    },
    // 验证选择项
    testSelect(rule, value, callback) {
      if (value === '0') {
        // eslint-disable-next-line standard/no-callback-literal
        callback('请选择')
      }
      callback()
    },
    // 验证住院天数
    testBedIn(rule, value, callback) {
      if (value < 0) {
        // eslint-disable-next-line standard/no-callback-literal
        callback('住院天数不能小于0')
      }
      callback()
    },
    // 验证金额
    testMoney(rule, value, callback) {
      if (value < 0) {
        // eslint-disable-next-line standard/no-callback-literal
        callback('金额必须为整数，0为不设改奖项')
      }
      callback()
    },
    testMinAge(rule, value, callback) {
      if (value < 18) {
        // eslint-disable-next-line standard/no-callback-literal
        callback('最小满18岁')
      }
      callback()
    },
    testMaxAge(rule, value, callback) {
      if (value > 60) {
        // eslint-disable-next-line standard/no-callback-literal
        callback('最大不超过60岁')
      }
      callback()
    },
    // 疾病类型列表
    getIllness() {
      this.isLoading = true
      const that = this
      Api.illnessList({ line: this.illnessLine })
        .then((result) => {
          that.illnessList = result.data.list.data
        })
        .finally((result) => {
          this.isLoading = false
        })
    },
    getHospital() {
      this.isLoading = true
      const that = this
      Api.hospitalList({ line: this.hospitalLine })
        .then((result) => {
          that.hospitalList = result.data.list.data
        })
        .finally((result) => {
          this.isLoading = false
        })
    },
    /**
     * 确认按钮
     */
    handleSubmit(e) {
      e.preventDefault()
      // 表单验证
      const {
        form: { validateFields },
      } = this
      validateFields((errors, values) => {
        // 提交到后端api
        !errors && this.onFormSubmit(values)
      })
    },

    /**
     * 新增项目详情
     */
    infoAdd() {
      this.infoData.push({
        id: this.infoId++,
        data: this.info,
      })
    },
    /**
     * 详情删除
     */
    delInfo(i) {
      this.infoData.splice(i, 1)
    },

    /**
     * 提交到后端api
     */
    onFormSubmit(values) {
      this.isLoading = true
      Api.add({ form: values })
        .then((result) => {
          // 显示提示信息
          this.$message.success(result.message, 1.5, () => {
            this.$router.push('/project/manage/project_index')
          })
        })
        .finally((result) => {
          this.isLoading = false
        })
    },
  },
}
</script>
<style lang="less" scoped>
.ant-form-item {
  .ant-form-item {
    margin-bottom: 0;
  }
}

/deep/.ant-form-item-control {
  padding-left: 10px;
  .ant-form-item-control {
    padding-left: 0;
  }
}
</style>
